
<template>
  <div class="device-list">
    <div class="device-items" v-for="item in list" v-bind:key="item.id" @touchstart.stop="() => $router.push('/mobile/device-detail')">
      <div class="img">
        <img src="../../assets/images/equ-demo.png" alt="">
      </div>
      <div class="info">
        <span class="name">{{ item.name }}</span>
        <span class="code">{{ item.code }}</span>
        <span class="desc">{{ item.desc }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'

const list = ref([
  {
    id: 1,
    name: '电感耦合等离子体光谱仪',
    code: 'Optima 7300DV',
    desc: '石油地质实验研究中心',
    img: ''
  },
  {
    id: 2,
    name: '电感耦合等离子体光谱仪',
    code: 'Optima 7300DV',
    desc: '石油地质实验研究中心',
    img: ''
  },
  {
    id: 3,
    name: '电感耦合等离子体光谱仪',
    code: 'Optima 7300DV',
    desc: '石油地质实验研究中心',
    img: ''
  },
  {
    id: 4,
    name: '电感耦合等离子体光谱仪',
    code: 'Optima 7300DV',
    desc: '石油地质实验研究中心',
    img: ''
  },
  {
    id: 5,
    name: '电感耦合等离子体光谱仪',
    code: 'Optima 7300DV',
    desc: '石油地质实验研究中心',
    img: ''
  }
])

</script>

<style scoped lang="scss">
.device-list{
  .device-items{
    display: flex;
    padding: dpi(7rem) dpi(4rem);
    background-color: #ffffff;
    &:not(&:first-child) {
      border-top: solid 1px #dddddd;
    }

    .img{
      display: flex;
      align-items: center;
      height: dpi(20rem);
      width: dpi(15rem);
      > img{
        height: 100%;
      }
    }

    .info{
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;
      margin-left: dpi(4rem);
      .name{
        margin-bottom: dpi(2rem);
        font-family: PingFangSC-Medium;
        font-size: dpi(3rem);
        color: #05204d;
      }
      .code{
        font-family: PingFangSC-Regular;
        font-size: dpi(2rem);
        color: #0571b0;
      }
      .desc{
        margin-top: dpi(1rem);
        font-family: PingFangSC-Regular;
        font-size: dpi(2rem);
        color: #565656;
      }
    }
  }
}
</style>